<template>
<div>
  <Breadcrumb :items="['系统管理', '角色及授权管理']" />
  <a-card class="general-card" title="角色及授权管理">
    <template #extra>
      <a-space direction="horizontal" :size="18">
        <a-button v-authorities="[SYS_PM.SYS_ROLE_READ]" type="primary" :loading="loading" @click="refresh">
          <template #icon>
            <icon-refresh />
          </template>
          刷新
        </a-button>
      </a-space>
    </template>

    <!--分割线-->
    <a-divider direction="horizontal" />
    <a-row style="margin-bottom: 16px">
      <a-col :span="16">
        <a-space>
          <a-button v-authorities="[SYS_PM.SYS_ROLE_WRITE]" type="primary" @click="onCreate">
            <template #icon>
              <icon-plus />
            </template>
            添加
          </a-button>
        </a-space>
      </a-col>
      <a-col :span="8" style="text-align: right">
        <a-space>
          <table-column-setting v-model:columns="columns" />
        </a-space>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :data="tbData"
      :loading="loading"
      row-key="id"
      :pagination="false"/>

    <role-drawer ref="roleDrawer" @refresh="refresh" />
    <role-joins-authorities ref="roleJoinsAuthorities" />
  </a-card>
</div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from "vue";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import RoleDrawer from "@/views/system/role/components/role-drawer.vue";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import RoleJoinsAuthorities from "@/views/system/role/components/role-joins-authorities.vue";
import TableColumnSetting from "@/components/table/table-column-setting.vue";
import useLoading from "@/hooks/loading";
import { deleteById, listAll } from "@/api/modules/system/role";
import dayjs from "dayjs";
import type { RoleVo } from "@/types/modules/system";
import { SYS_PM } from "@/types/PM";
import type {TableColumnData} from "@arco-design/web-vue";

const columns = ref<TableColumnData[]>([{
  title: "角色名",
  dataIndex: "name",
}, {
  title: '角色编码',
  dataIndex: 'code',
}, {
  title: '创建时间',
  dataIndex: 'createTime',
  render: ({ record }: { record: any }) => {
    return dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
  }
},{
  title: '修改时间',
  dataIndex: 'updateTime',
  render: ({ record }: { record: any }) => {
    return dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss')
  }
}, {
  title: "操作",
  width: 330,
  align: "right",
  fixed: "right",
  dataIndex: 'operation',
  render: ({ record }: { record: any }) => {
    return <>
      <a-button
        v-authorities={Array.of(SYS_PM.GRANT_ROLE_AUTHORIZATION)}
        type="text"
        size="small"
        onClick={() => onJoinsAuthorities(record.id)}
        v-slots={{
          icon: () => <icon-robot-add />,
          default: () => '授予权限'
        }}>
      </a-button>
      <a-button v-authorities={Array.of(SYS_PM.SYS_ROLE_READ)} type="text" size="small" onClick={() => onPreview(record.id)}>
        预览
      </a-button>
      <a-button v-authorities={Array.of(SYS_PM.SYS_ROLE_WRITE)} type="text" size="small" onClick={() => onUpdate(record.id)}>
        编辑
      </a-button>
      <a-popconfirm content={`确定删除 '${record.name}' 吗?`} type="warning" onOk={() => onDelete(record.id)}>
        <a-button v-authorities={Array.of(SYS_PM.SYS_ROLE_WRITE)} type="text" size="small" status="danger">
          删除
        </a-button>
      </a-popconfirm>
    </>
  }
}])
const tbData = ref<RoleVo[]>([]);
const { loading, setLoading } = useLoading();
const roleDrawer = ref<any>(null);
const roleJoinsAuthorities = ref<any>(null)

const refresh = async () => {
  setLoading(true)
  tbData.value = (await listAll()).data
  setLoading(false)
}

const onCreate = async () => {
  setLoading(true)
  await roleDrawer.value.createHandle()
  setLoading(false)
}

const onUpdate = async (id: number) => {
  setLoading(true)
  await roleDrawer.value.updateHandle(id)
  setLoading(false)
}

const onDelete = async (id: number) => {
  setLoading(true)
  try {
    await deleteById(id)
  } finally {
    await refresh()
  }
  setLoading(false)
}

const onPreview = async (id: number) => {
  setLoading(true)
  await roleDrawer.value.previewHandle(id)
  setLoading(false)
}

const onJoinsAuthorities = async (id: number) => {
  setLoading(true)
  await roleJoinsAuthorities.value.addJoinsAuthorities(id)
  setLoading(false)
}

onMounted(() => {
  refresh()
})
</script>

<script lang="tsx">
export default {
  name: 'Role',
};
</script>

<style scoped>

</style>
